<template>
  <div class="video-list-container" :style="`width: ${videoWidth}px`">

    <!-- 视频播放头部操作 -->
    <div class="video-header">
      <div>
        <div class="header-left-li" @click="prevPlayPage">
          <img src="@/assets/images/safety/prev_play.png">
        </div>
        <div class="header-left-li" @click="nextPlayPage">
          <img src="@/assets/images/safety/next_play.png">
        </div>
      </div>

      <div>
        <!-- 视频缩放画面 -->
        <el-dropdown trigger="click">
          <div class="header-right-li">
            <img src="@/assets/images/safety/video_ratio.png">
            <div class="opt">
              <img src="@/assets/images/safety/video_opt_icon.png">
            </div>
          </div>
          <template #dropdown>
            <el-dropdown-item>满画面显示</el-dropdown-item>
            <el-dropdown-item>原始比例显示</el-dropdown-item>
            <el-dropdown-item>原始比例显示</el-dropdown-item>
            <el-dropdown-item>4:3</el-dropdown-item>
            <el-dropdown-item>16:9</el-dropdown-item>
          </template>
        </el-dropdown>
        <!-- 视频抓拍 -->
        <el-dropdown trigger="click">
          <div class="header-right-li">
            <img src="@/assets/images/safety/video_photo.png">
            <div class="opt">
              <img src="@/assets/images/safety/video_opt_icon.png">
            </div>
          </div>
          <template #dropdown>
            <el-dropdown-item>808抓拍(默认值)</el-dropdown-item>
            <el-dropdown-item>808抓拍(800*600)</el-dropdown-item>
            <el-dropdown-item>808抓拍(1024*768)</el-dropdown-item>
          </template>
        </el-dropdown>
        <!-- 视频播放 -->
        <el-dropdown trigger="click">
          <div class="header-right-li">
            <img src="@/assets/images/safety/play.png">
            <div class="opt">
              <img src="@/assets/images/safety/video_opt_icon.png">
            </div>
          </div>
          <template #dropdown>
            <el-dropdown-item>开启视频</el-dropdown-item>
            <el-dropdown-item>开启所有视频</el-dropdown-item>
          </template>
        </el-dropdown>
        <!-- 视频停止 -->
        <el-dropdown trigger="click">
          <div class="header-right-li">
            <img src="@/assets/images/safety/stop_play.png">
            <div class="opt">
              <img src="@/assets/images/safety/video_opt_icon.png">
            </div>
          </div>
          <template #dropdown>
            <el-dropdown-item>停止视频</el-dropdown-item>
            <el-dropdown-item>停止所有视频</el-dropdown-item>
          </template>
        </el-dropdown>
        <div class="header-right-li">
          <img src="@/assets/images/safety/video_preview.png">
        </div>
      </div>
    </div>

    <div class="video-list">
      <videoBox v-for="i in 10" v-show="showVideoLimit(i)" />
    </div>

    <div class="video-footer">
      <div class="footer-button">
        <div class="button-active">视频预览</div>
        <div>图片预览</div>
      </div>
      <div class="retract-option" @click="toggleVideoWidth">
        <img src="@/assets/images/safety/retract.png">
      </div>
    </div>

  </div>
</template>

<script setup>
import videoBox from './video.vue'
import useSatetyMapStore from '@/store/modules/safetyMap'
const safeMapStore = useSatetyMapStore();
const { proxy } = getCurrentInstance();

//隐藏视频盒框
const videoWidth = computed(() => {
  return safeMapStore.mapVideoListWidth
})
function toggleVideoWidth() {
  safeMapStore.setMapVideoListWidth(0)
}

const videoPage = ref(1);

//显示展示某一页的4个视频
function showVideoLimit(i) {
  if ((videoPage.value - 1) * 4 < i && i <= videoPage.value * 4) {
    return true;
  } else {
    return false;
  }
}

//上一页播放组
function prevPlayPage() {
  if (videoPage.value == 1) {
    proxy.$modal.msgError("已经是第一页了");
    return false;
  }
  videoPage.value -= 1
}

//下一页播放组
function nextPlayPage() {
  if (videoPage.value == 3) {
    proxy.$modal.msgError("已经是最后页了");
    return false;
  }
  videoPage.value += 1
}


</script>

<style lang="scss" scoped>
.video-list-container {
  height: 100%;
  background-color: #091940;
  transition: width .3s ease;

  .video-header {
    display: flex;
    padding: 0 10px;
    height: 30px;
    align-items: center;
    justify-content: space-between;

    div {
      display: flex;
      align-items: center;

      .header-left-li {
        margin-right: 10px
      }

      .header-right-li {
        margin-left: 10px;

        .opt {
          width: 10px;
          height: 20px;
          background-color: #4B6796;
          display: flex;
          justify-content: center;
        }
      }

    }
  }

  .video-list {
    width: 100%;
    height: 764px;
    display: flex;
    flex-direction: column;
    background-color: #1C2F61;
    border-top: 1px solid #2B497D;
    border-bottom: 1px solid #2B497D;
    overflow: hidden;
  }

  .video-footer {
    display: flex;
    align-items: center;
    padding: 0 10px;
    height: 33px;
    justify-content: space-between;
    border-left: 1px solid #2B497D;
    color: #FFFFFF;

    .footer-button {
      display: flex;

      div {
        padding: 0px 8px;
        height: 22px;
        line-height: 22px;
        border: 1px solid #2B497D;
        border-radius: 5px;
        margin-right: 10px;

        &.button-active {
          background-color: #668FF5;
        }
      }
    }

    .retract-option {
      height: 16px;
    }
  }
}
</style>